<template>
    <div >
        <div v-show="showEdit">
             <x-header>{{cl_name}} 编辑</x-header>
            <div style="background:#FFFFFF" class="cl_title">
                <span>课程名称<i>*</i></span>
            </div>
            <div style="background:#FFFFFF" class="classname">
                <x-input class="cl_time" v-model="cl_name"  text-align="left" placeholder="请输入课程(20个字符)"  ></x-input>
                <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:4.5px;">
            </div>
            <ul>
                <li v-for="(tiar,index) in time_area">
                    <div class="cl_title">
                        <span>上课时间 ({{index+1}})<i>*</i></span>
                        <span @click="class_del(index)"  style="color:#2589FF;text-align:right;"  class="rt" >删除</span>
                    </div>
                    <div class="classname">
                        <datetime style="padding:10px 0;" v-model="tiar.starttime"  :start-date="startDate" 
                        format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('开始时间')"></datetime>
                        <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:4.5px;">
                        <datetime style="padding:10px 0;" v-model="tiar.endtime"  :start-date="startDate2" 
                        format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('结束时间')"></datetime>
                        <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:4.5px;">
                    </div>
                    <div class="cl_title">
                        <span>上课地点<i>*</i></span>
                    </div>
                    <div class="classname">
                        <x-input class="cl_time" v-model="tiar.address"   text-align="left" placeholder="请输入上课地点(20个字符)"  ></x-input>
                        <hr style="border:0.5px solid #EEEEEE;margin:4.5px 0;">
                    </div>
                </li>
            </ul>
            <!-- <div class="cl_maintain" >
                <div style="width:45%" @click="ad_class">
                    <img  src="../asset/images/adbtn.png" alt="">
                    <span style="color:#2589FF ;">添加时间地点</span>   
                </div>
            </div>  -->
            <div class="teacher">
                <p >
                    <span class="lf lf_sp">讲师</span>
                    <span @click="chooseTeacher">
                        <span class="rt rt_sp">></span> 
                        <img class="rt" :src="teacherimg" alt="" style="border-radius:12.5px;">
                        <span class="rt rt_sp2">{{teacher}}</span>
                    </span>
                </p>
                <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:5px;"> 
            </div>
            <div class="teacher">
                <p>
                    <span class="lf lf_sp">助教</span>
                    <span @click="chooseAssistant">
                        <span class="rt rt_sp">></span> 
                        <img class="rt "  :src="assistantimg" alt="" style="border-radius:12.5px;">
                        <span class="rt rt_sp2">{{assistant}}</span>
                    </span>
                </p>
                <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:5px;"> 
            </div>
            <div  class="m_del">
                <p class="f_p">资料下载地址</p>
                <x-input class="s_p"  text-align="left" placeholder="请输入下载地址" v-model="filepath"  ></x-input>
                <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:5px;"> 
            </div>
            <div>
                <x-button @click.native="submit" class="usual" :disabled="!cl_name"><span>提交</span></x-button>
            </div>
        </div>
        <teacher v-show="showTeacher" @tEvent="tedit"></teacher>
        <assistant v-show="showAssistant" @aEvent="aedit"></assistant>
    </div>
    
</template>


<script>
import  teacher  from './teacher'
import assistant from './assistant'
import { XHeader,XInput,XButton, DatetimeRange,Datetime,Flexbox, FlexboxItem } from 'vux'
import { mapActions } from 'vuex';
export default {
    data() {
        return {
            httpmsg:'请求异常',
            classid:this.$route.query.classid,
            teacherimg:'',
            assistantimg:'',
            teacher_id:'',
            assistant_id:'',
            showEdit:true,
            showTeacher:false,
            showAssistant:false,
            page:this.$route.query.page,
            index:'',
            item:'',
            filepath:'',
            teacher:'',
            assistant:'',
            cl_name:'',
            startDate:'',
            startDate2: '',
            index2:'',
            time_area:[
                    {
                        address:'',
                        subclassid:'',
                        time:'',
                    }
                ]  
        } 
    }, 
    components: {
        teacher,
        assistant,
        XHeader,
        XInput,
        XButton,
        DatetimeRange,
        Flexbox, 
        FlexboxItem,
        DatetimeRange,
        Datetime 
    },
    computed:{
         classall () {
            return this.$store.state.user.publishclassinfo
        },
        errinfo(){
            var errinfo = this.$store.state.user.errinfo
            return errinfo
        }
    },
    created(){
        this.getclassindex();
        console.log(this.index)
        this.item = this.classall[this.index];
        this.filepath=this.item.filepath;
        this.time_area = this.item.subclassinfo;
        var arr= this.item.subclassinfo
        for(var i=0;i<arr.length;i++){
            var subinfo =arr[i]
            var timearr = subinfo.time.split("（")
            var datestr = timearr[0]
            var timestr = timearr[1].split("）")[1]
            var firsttime = timestr.split("-")[0]
            var lasttime = timestr.split("-")[1]
            subinfo["starttime"]=datestr+' '+firsttime
            subinfo["endtime"] = datestr+' '+lasttime
        }
        this.cl_name = this.item.subject
        this.teacher = this.item.teacher
        this.assistant = this.item.assistant
        this.teacherimg  = this.item.teacherimg
        this.teacher_id = this.item.teacherid
        this.assistant_id = this.item.assistantid
        this.assistantimg = this.item.assistantimg
    },
    methods:{
        ...mapActions({
            getPublishClass:'getPublishClass',
            updateClass:'updateClass'
        }),
        getclassindex(){
            // debugger
            var classinfo = this.classall
            for(var i=0;i<classinfo.length;i++){
                if(classinfo[i].classid==this.classid){
                    this.index=i
                }
            }
        },
        change (value) { 
        },
        ad_class(){
            var tiar = this.time_area
            tiar.push({
                address:'',
                subclassid:'',
                time:'',
           })
           return tiar
        },
        class_del(index){
            var newsubclassall = []
            var arr = this.time_area
            for(var i=0;i<arr.length;i++){
                if(arr[i]!=arr[index]){
                    newsubclassall.push(arr[i])
                }
            }
            this.time_area = newsubclassall
        },
        submit(){
            var subclassall = this.time_area
            var subclass = []
            for(var i=0;i<subclassall.length;i++){
                subclass.push({
                    "starttime":subclassall[i].starttime,
                    "endtime":subclassall[i].endtime,
                    "address":subclassall[i].address,
                    "subclassid":subclassall[i].subclassid
                })
            }
            var param = {
                "subclass":subclass,
                "class":{
                    "subject":this.cl_name,
                    "id":this.classid,
                    "user_id":this.$store.state.user.userinfo.id,
                    "user_name":this.$store.state.user.userinfo.name,
                    "teacher_id":this.teacher_id,
                    "teacher_name":this.teacher,
                    "assistant_id": this.assistant_id,
                    "assistant_name":this.assistant,
                    "filepath":this.filepath
                }
            }
                this.updateClass({ vue: this, param: param }).then(rs => {
                console.log("success")
                 this.getPublishClass({vue:this}).then(rs => {//go(-1)前重新发请求获取新的publishclassinfo,否则publishclassinfo无变化
                    console.log("getPublishClass success") 
                    this.$router.go(-1)
                }).catch(error => {
                   
                    console.log(error)
                })
               
            }).catch(error => {
                    // debugger
                    var errinfo = this.errinfo
                    if(errinfo.code===400){
                        this.$vux.toast.text(errinfo.msg, 'default')
                    }else if(errinfo.response&&(errinfo.response===undefined)){
                        this.$vux.toast.text('请求超时', 'default')
                    }else{
                        this.$vux.toast.text(this.httpmsg+this.errinfo.response.data.error, 'default')
                    }
                console.log(error)
            })  
        },
        chooseTeacher(){
            console.log('chooseTeacher')
            this.showEdit = false;
            this.showTeacher=true;
        },
        chooseAssistant(){
            this.showEdit = false;
            this.showAssistant = true;
        },
        tedit({t_length}){
            this.showEdit = true;
            this.showTeacher = false;
            console.log('老师的位置'+t_length)
            this.teacher_id = this.$store.state.user.teachersinfo[t_length].teacherid
            this.teacher = this.$store.state.user.teachersinfo[t_length].teachername
            this.teacherimg = this.$store.state.user.teachersinfo[t_length].pic
        },
        aedit({a_length}){
            this.showEdit = true;
            this.showAssistant = false;
            console.log('助教的位置'+a_length)
            this.assistant_id =this.$store.state.user.allusersinfo[a_length].teacherid
            this.assistant = this.$store.state.user.allusersinfo[a_length].teachername
            this.assistantimg = this.$store.state.user.allusersinfo[a_length].pic
        }
    }
}
</script>

<style scoped>
    .lf{
        float: left;
    }
    .rt{
        float: right;
    }
    .cl_title{
        height:55.5px;
        padding:21.5px 17.5px 20px 17.5px;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color:#363636 ;
        background: #FCFCFC;

    }
    .cl_title i{
        height: 15px;
        width:15.5px;
        color: #F25257;
        display: inline-block;
        text-align: center
    }
    .cl_title span{
        height:15px;
        width:90px;
        font-size: 15px;
        font-family:  PingFangSC-Medium;
    }
    .classname{
        padding:0 17.5px;
        background: #FCFCFC

    }
    .classname .cl_time{
        padding:0;
        color:#A5A5A5;
    }
     .cl_maintain{
        height:50px;
        padding:12px 17.5px;
        background: #FCFCFC
    }
    .cl_maintain img{
        width:15px;
        height:15px;
        margin:5.5px 7.5px 0 0;
    }
    .cl_maintain span{
        width:91px;
        height:25.5px;
    }
    .teacher{
        height:50.5px;
        padding:20px 17.5px 5px 17.5px;
    }
    .teacher p{
        height:25.5px;
    }
    .lf_sp{
        width:30px;
        height:25.5px;
        line-height: 25.5px;
        font-size: 15px;
        color:#363636;
        font-family: PingFangSC-Regular

    }
    .rt_sp{
        width:8px;
        height:14px;
        color:#E0E0E0;
        margin:5px 17.5px 0.5px 15px;
    }
    .rt_sp2{
        height: 25px;
        line-height: 25px;
        font-size: 10px;
        color: #A5A5A5;
        font-family: PingFangSC-Light;
        margin-right: 5px;
    }
    .teacher img{
        width:25px;
        height:25px;
    }
    .m_del{
        height:65.5px;
        padding-left:17.5px;
        padding-right: 17.5px;
    }
    .f_p{
        width:78px;
        height:15px;
        margin-top:20px;
        margin-bottom: 20px;
        font-size: 13px;
        color:#363636;
        font-family: PingFangSC-Regular
    }
     .s_p{
        height:25.5px;
        font-size: 15px;
        color:#A5A5A5;
        font-family:PingFangSC-Light;
        line-height: 25.5px;
        padding: 0
    }
    .usual{
        width:92%;
        height:35px;
        line-height: 35px;
        margin:15px;
        background: #F25257;
        
   }
   .usual:disabled{
        width:92%;
        height:35px;
        line-height: 35px;
        margin:15px;
        background: #EEEEEE;
   }
    .usual span{
        height:15px;
        font-size:14px;
        color: #FFFFFF; 
    }
  
</style>
